import React, { Component } from 'react'
import Top from './Top/index'
import Main from './Main/index'
import axios from 'axios'
import 'antd/dist/antd.css'
import { Carousel } from 'antd';


class Home extends Component {

    state = {
        list: [],
        i: 0
    }

    componentDidMount() {
        axios.get('/api/list').then((res) => {
            this.setState({
                list: res.data
            })
        })
    }

    clickBtn = (index) => {
        this.setState({
            i: index
        })
    }

    hyhBtn() {
        axios.get('/api/list').then((res) => {
            this.setState({
                list: res.data
            })
        })
    }

    render() {
        let { list, i } = this.state
        return (
            <div className='box'>
                <Top list={list} i={i} clickBtn={this.clickBtn} />
                <Carousel autoplay>
                    <div>
                        <h3 style={contentStyle}>1</h3>
                    </div>
                    <div>
                        <h3 style={contentStyle}>2</h3> 
                    </div>
                    <div>
                        <h3 style={contentStyle}>3</h3>
                    </div>
                    <div>
                        <h3 style={contentStyle}>4</h3>
                    </div>
                </Carousel>
                <Main list={list} i={i} />
                <div style={{ textAlign: 'center' }} onClick={() => {
                    this.hyhBtn()
                }}>
                    换一换
                </div>
            </div>
        )
    }
}

const contentStyle = {
    height: '160px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
}

export default Home